<script>
import moment from "moment";
import { Loading } from "element-ui";
export default {
  props: {
    title: {
      type: String,
    },
    createAt: {
      type: String,
    },
    content: {
      type: String,
    },
    filePath: {
      type: String,
    },
    type: {
      type: Number,
      default: 1, // 1 文本   2 文件     3 图片
    },
  },
  data() {
    return {
      showContext: false,
      moment: moment,
      wrapperElem: null,
    };
  },
  computed: {
    avatar() {
      return this.title ? this.title.substr(-2) : "";
    },
  },
  methods: {
    downloadFile(fileName) {
      // 删除文件名前边的路径，如im-end-dev/远大支持论坛_1654762887980.png，
      // 则转换为：远大支持论坛_1654762887980.png
      let fileNameArray = fileName && fileName.split("/");
      //开启遮罩层
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "正在下载文件，请耐心等待", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
        target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
      });
      console.log("dddd", fileNameArray);
      let downloadFileName = undefined;
      if (fileNameArray.length == 1) {
        downloadFileName = fileNameArray[0];
      } else {
        downloadFileName = fileNameArray[fileNameArray.length - 1];
      }
      // 下载文件
      this.$API.admins
        .fileDownload({ filename: downloadFileName, type: 2 })
        .then((response) => {
          //关闭遮罩层
          loadingInstance.close();
          const blob = new Blob([response], { type: "" });
          console.log(blob, "22222222222");
          saveAs(blob, fileName);
        })
        .catch((error) => {
          //关闭遮罩层
          loadingInstance.close();
          this.$message.error(error);
        });
    },
    checkImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
          "el-image-viewer__actions__inner"
        );
        let downImg = document.createElement("i");
        downImg.setAttribute("class", "el-icon-download");
        wrapper[0].appendChild(downImg);
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0];
          this.cusClickHandler();
        }
      });
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener("click", this.hideCusBtn);
    },
    hideCusBtn(e) {
      let className = e.target.className;
      if (className === "el-icon-download") {
        let imgUrl = document.getElementsByClassName(
          "el-image-viewer__canvas"
        )[0].children[0].src;
        this.downloadImage(imgUrl, 3);
      }
    },
    downloadImage(imgUrl, type) {
      let fileNameArray = imgUrl && imgUrl.split("/");
      //开启遮罩层
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "正在下载文件，请耐心等待", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
        target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
      });

      let downloadFileName = undefined;
      if (fileNameArray.length == 1) {
        downloadFileName = fileNameArray[0];
      } else {
        downloadFileName = fileNameArray[fileNameArray.length - 1];
      }
      // 下载文件
      this.$API.admins
        .fileDownload({ filename: downloadFileName, type })
        .then((response) => {
          //关闭遮罩层
          console.log("tag", response);
          loadingInstance.close();
          const blob = new Blob([response], { type: "" });
          saveAs(blob, imgUrl);
        })
        .catch((error) => {
          //关闭遮罩层
          loadingInstance.close();
          this.$message.error(error);
        });
    },
  },
  mounted() {
    console.log(this.showContext);
  },
};
</script>
<template>
  <div class="base-record-item">
    <div class="base-record-item-left">
      <div class="base-record-item-avatar">{{ avatar }}</div>
      <div class="base-record-item-info">
        <div class="base-record-item-name">{{ title }}</div>
        <div
          class="base-record-item-content"
          v-if="type === 1"
          v-html="content"
        ></div>
        <div
          class="base-record-item-filePath"
          v-else-if="type === 2"
          @click="downloadFile(filePath)"
        >
          <!-- {{filePath.split("/")[1] ||filePath.split("/")[1]}} -->
          {{ filePath.replace("im-end-dev/", "").replace("im-end-dev\\", "") }}
          <i class="el-icon-paperclip"></i>
        </div>
        <div class="base-record-item-content" v-else-if="type === 3">
          <!-- <img :src="filePath" alt=""> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="filePath"
            :preview-src-list="[filePath]"
            @click="checkImage"
          />
        </div>
      </div>
    </div>
    <div class="base-record-item-right">
      <div class="base-record-item-time">
        {{ moment(createAt).format("MM月DD日 HH:mm") }}
      </div>
      <slot></slot>
    </div>
  </div>
</template>
<style lang="less" scoped>
.base-record-item {
  display: flex;
  justify-content: space-between;
  padding: 20px 0;
  color: #333;
  border-bottom: solid 1px #f6f6fb;

  &-left {
    flex: 1;
    display: flex;
    justify-content: left;
  }
  &-info {
    margin-left: 10px;
  }
  &-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    line-height: 40px;
    background-image: url(../assets/head.png);
    background-size: cover;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }
  &-name {
    color: #999;
    font-size: 12px;
  }
  &-content {
    font-size: 14px;
    margin-top: 5px;
    white-space: pre-wrap;
    img {
      width: 225px;
      height: 90px;
    }
  }
  &-filePath {
    border: 1px solid #eee;
    padding: 10px;
    margin: 2px;
    background: rgb(255, 255, 255);
    border-radius: 3px;
    margin-top: 5px;
    i {
      font-size: 30px;
      color: #bbb;
      text-align: right;
      display: block;
    }
  }
  &-time {
    color: #b9b9b9;
    font-size: 12px;
  }
  &-link {
    margin-top: 8px;
    a {
      cursor: pointer;
      color: #33b9f7;
      font-size: 12px;
    }
  }
  &-right {
    text-align: right;
  }
}
</style>